<template>
    <div id="app">
        <el-table :data="tableData" border>
            <el-table-column prop="id" label="编号" width="100" align="center"></el-table-column>
            <el-table-column prop="name" label="书名" width="200"></el-table-column>
            <el-table-column prop="author" label="作者" width="100" align="center"></el-table-column>
            <el-table-column prop="publish" label="出版商" width="200" align="center"></el-table-column>
            <el-table-column prop="pages" label="页数" width="100" align="center"></el-table-column>
            <el-table-column prop="price" label="价格 / 元" width="100" align="right"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="deleteBook(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination background layout="prev, pager, next"
                :page-size="pageSize" :total="total" @current-change="page">
        </el-pagination>

    </div>
</template>
<script>
    export default {
        methods: {
            deleteBook(row){
                const _this = this
                axios.delete('http://localhost:8181/book/deleteById/'+row.id).then(function(resp){
                    _this.$alert('《'+row.name+'》删除成功！', '消息', {
                        confirmButtonText: '确定',
                        callback: action => {
                            window.location.reload()
                        }
                    })
                })
            },
            edit(row) {
                this.$router.push({
                    path: '/update',
                    query:{
                        id:row.id
                    }
                })
            },
            page(currentPage){
                const _this = this;
                axios.get('http://localhost:8181/book/findByPage/'+(currentPage-1)+'/5').then(function(resp){
                    // console.log(resp);
                    _this.tableData = resp.data.content;
                    _this.pageSize = resp.data.size;
                    _this.total = resp.data.totalElements;
                })
            }
        },
        data() {
            return {
                pageSize: 0,
                total: 0,
                tableData: []
            }
        },
        created() {
            const _this = this;
            axios.get("http://localhost:8181/book/findByPage/0/5").then(function(resp){
                _this.pageSize = resp.data.size;
                _this.total = resp.data.totalElements;
                _this.tableData = resp.data.content;
            });
        }
    }
</script>